<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc.

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Card - Material Components Catalog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
    <link rel="stylesheet" href="/assets/card.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="/ready.js"></script>
  </head>

  <body class="mdc-typography">
    <header class="mdc-toolbar mdc-toolbar--fixed">
      <div class="mdc-toolbar__row">
        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
          <a href="/" class="catalog-back mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
          <span class="mdc-toolbar__title catalog-title">Card</span>
        </section>
      </div>
    </header>

    <main>
      <div class="mdc-toolbar-fixed-adjust"></div>

      <section class="hero">
        <div class="mdc-card demo-card">
          <a class="mdc-card__primary-action" href="#">
            <div class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></div>
            <div class="demo-card__primary">
              <h2 class="demo-card__title mdc-typography--headline6">Our Changing Planet</h2>
              <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
            </div>
            <div class="demo-card__secondary mdc-typography--body2">
              Visit ten places on our planet that are undergoing the biggest changes today.
            </div>
          </a>
          <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons">
              <button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
              <button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
            </div>
            <div class="mdc-card__action-icons">
              <button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
                 aria-pressed="false"
                 aria-label="Add to favorites"
                 title="Add to favorites" data-demo-toggle>
                <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
                <i class="material-icons mdc-icon-button__icon">favorite_border</i>
              </button>
              <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
                 data-mdc-ripple-is-unbounded
                 title="Share">share</button>
              <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
                 data-mdc-ripple-is-unbounded
                 title="More options">more_vert</button>
            </div>
          </div>
        </div>
      </section>

      <section class="demo-card-toggles">
        <div class="mdc-form-field">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
          <label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
        </div>
      </section>

      <section class="demo-card-collection">
        <div class="mdc-card mdc-card--outlined demo-card">
          <div class="demo-card-article-group-heading mdc-typography--subtitle2">Headlines</div>

          <hr class="mdc-list-divider">

          <a class="demo-card-article mdc-ripple-surface" href="#">
            <h2 class="demo-card-article__title mdc-typography--headline5">Copper on the rise</h2>
            <p class="demo-card-article__snippet mdc-typography--body2">
              Copper price soars amid global market optimism and increased demand.
            </p>
          </a>

          <hr class="mdc-list-divider">

          <a class="demo-card-article mdc-ripple-surface" href="#">
            <h2 class="demo-card-article__title mdc-typography--headline5">U.S. tech startups rebound</h2>
            <p class="demo-card-article__snippet mdc-typography--body2">
              Favorable business conditions have allowed startups to secure more fundraising deals compared to last
              year.
            </p>
          </a>

          <hr class="mdc-list-divider">

          <a class="demo-card-article mdc-ripple-surface" href="#">
            <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean energy ambitions</h2>
            <p class="demo-card-article__snippet mdc-typography--body2">
              China plans to invest billions of dollars for the development of over 300 clean energy projects in
              Southeast Asia.
            </p>
          </a>

          <hr class="mdc-list-divider">

          <div class="mdc-card__actions mdc-card__actions--full-bleed">
            <a class="mdc-button mdc-card__action mdc-card__action--button demo-card-action" href="#">
              All Business Headlines
              <i class="material-icons" aria-hidden="true">arrow_forward</i>
            </a>
          </div>
        </div>

        <div class="mdc-card demo-card demo-card--photo">
          <a class="mdc-card__primary-action demo-card__primary-action" href="#">
            <div class="mdc-card__media mdc-card__media--square demo-card__media">
              <div class="mdc-card__media-content demo-card__media-content--with-title">
                <div class="demo-card__media-title mdc-typography--subtitle2">
                  Vacation Photos
                </div>
              </div>
            </div>
          </a>
          <div class="mdc-card__actions mdc-card__action-icons">
            <button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
               aria-pressed="false"
               aria-label="Add to favorites"
               title="Add to favorites" data-demo-toggle>
              <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
              <i class="material-icons mdc-icon-button__icon">favorite_border</i>
            </button>
            <button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
               aria-pressed="false"
               aria-label="Add bookmark"
               title="Add bookmark" data-demo-toggle>
              <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">bookmark</i>
              <i class="material-icons mdc-icon-button__icon">bookmark_border</i>
            </button>
            <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
               data-mdc-ripple-is-unbounded
               title="Share">share</button>
          </div>
        </div>

        <div class="mdc-card demo-card demo-card--music">
          <a class="mdc-card__primary-action demo-card__primary-action" href="#">
            <div class="demo-card__music-row">
              <div class="mdc-card__media mdc-card__media--square demo-card__media demo-card__media--music"></div>
              <div class="demo-card__music-info">
                <div class="demo-card__music-title mdc-typography--headline5">Rozes</div>
                <div class="demo-card__music-artist mdc-typography--body2">Under the Grave</div>
                <div class="demo-card__music-year mdc-typography--body2">(2016)</div>
              </div>
            </div>
          </a>
          <hr class="mdc-list-divider">
          <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons demo-card__action-buttons--text-only">Rate this album</div>
            <div class="mdc-card__action-icons">
              <i class="material-icons demo-card__action-icon--star"
                 tabindex="0"
                 role="button"
                 title="1 star">
                star_border
              </i>
              <i class="material-icons demo-card__action-icon--star"
                 tabindex="0"
                 role="button"
                 title="2 stars">
                star_border
              </i>
              <i class="material-icons demo-card__action-icon--star"
                 tabindex="0"
                 role="button"
                 title="3 stars">
                star_border
              </i>
              <i class="material-icons demo-card__action-icon--star"
                 tabindex="0"
                 role="button"
                 title="4 stars">
                star_border
              </i>
              <i class="material-icons demo-card__action-icon--star"
                 tabindex="0"
                 role="button"
                 title="5 stars">
                star_border
              </i>
            </div>
          </div>
        </div>
      </section>
    </main>

    <script src="/assets/material-components-web.js" async></script>
    <script src="/assets/common.js" async></script>
    <script>
      demoReady(function() {
        var rtlToggle = document.getElementById('toggle-rtl');
        rtlToggle.addEventListener('change', function() {
          var docEl = document.documentElement;
          docEl.setAttribute('dir', rtlToggle.checked ? 'rtl' : 'ltr');
        });

        [].forEach.call(document.querySelectorAll('.mdc-button'), function(surface) {
          mdc.ripple.MDCRipple.attachTo(surface);
        });

        [].forEach.call(document.querySelectorAll('.mdc-icon-button[data-demo-toggle]'), function(iconButtonToggle) {
          mdc.iconButton.MDCIconButtonToggle.attachTo(iconButtonToggle);
        });

        document.addEventListener('MDCIconButtonToggle:change', function(evt) {
          evt.target.setAttribute('title', evt.target.getAttribute('aria-label'));
        });

        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface, [data-mdc-ripple-is-unbounded]'), function(surface) {
          mdc.ripple.MDCRipple.attachTo(surface);
        });

        [].forEach.call(document.querySelectorAll('.mdc-card__primary-action'), function(el) {
          mdc.ripple.MDCRipple.attachTo(el);
        });
      });
    </script>
  </body>
</html>
